<script setup lang="ts">


import type {TweetProject} from "~/utils/jiangying";

const show = ref(false)

const projects = ref<TweetProject[]>([])

onMounted(() => {
  handleGetProjectHistory()
})

//获取项目历史
const handleGetProjectHistory = async () => {
  projects.value = await JiangYing.getProjects()
  console.log(projects.value)
}

const {Resolution_id,backgroundMusic_id,useVideo,projectName, full_contents, cover_url,contents} = storeToRefs(useWorkEditStore())
/**
 * 切换项目
 * @param index
 */
const handleSelectProject = (index: number) => {
  projectName.value = projects.value[index].projectName
  contents.value = projects.value[index].contents
  full_contents.value = projects.value[index].full_contents
  cover_url.value = projects.value[index].cover_url
  Resolution_id.value = projects.value[index].Resolution_id
  backgroundMusic_id.value = projects.value[index].backgroundMusic_id
  useVideo.value = projects.value[index].useVideo
  useSnackbarStore().showSuccessMessage('切换项目成功')
}
</script>

<template>
  <v-row>
    <v-col
        v-for="(project, index) in projects"
        :key="index"
        cols="12"
        sm="6"
        md="4"
        lg="3"
    >
      <v-card
          class="mx-auto my-2"
          max-width="344"
      >
        <v-img
            height="300px"
            :src="project.cover_url"
            cover
        ></v-img>

        <v-card-title>
          {{ project.projectName }}
        </v-card-title>

        <v-card-subtitle>
          {{ project.full_contents }}
        </v-card-subtitle>

        <v-card-actions>
          <v-btn
              color="primary-lighten-2"
              variant="flat"
              prepend-icon="mdi-pencil"
              @click="handleSelectProject(index)"
          >编辑
          </v-btn>

          <v-spacer></v-spacer>

          <v-btn
              :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
              @click="show = !show"
          ></v-btn>
        </v-card-actions>

        <v-expand-transition>
          <div v-show="show">
            <v-divider></v-divider>

            <v-card-text>
              {{ project.full_contents }}
            </v-card-text>
          </div>
        </v-expand-transition>
      </v-card>

    </v-col>
  </v-row>


</template>

<style scoped lang="scss">

</style>